import {Component  } from "react";

class TestState extends Component{
  /**
   * 
    + 状态`state`，即数据，是组件内部的**私有数据**，只能在组件内部使用
    + 状态 state 的值是**对象**，表示一个组件中可以有多个数据
    + 通过 `this.state.xxx` 来获取状态
   */
  state={
    count:0,
    obj:{
      name:'zs',
      age:10
    },
    list:[1,2,3]
  }
      /**
     * vue修改数据思想：== 数据可变 == =》 可以直接修改之前的值
     * vue修改数据：this.变量名 = 新值
     *
     * react修改数据思想：== 数据不可变 == => 不能直接修改之前的值
     * 使用一个方法：this.setState({
     *    变量名1:最新修改的值1,
     *    变量名2:最新修改的值2,
     *    ...
     * })
     * 说明❓，修改数据口诀：新值覆盖老值
     * 说明❓，修改数据口诀：== 新值 == 覆盖老值
     */
 
  changeState=()=>{
    this.setState({
      count:Math.random(),
      obj:{
        ...this.state.obj,
        name:'wwu',
        age:this.state.obj.age+1
        },
        list:[
          ...this.state.list,
          Math.random()
        ]
    })
  }
  render(){
    return(
      <div>
        <h1>类组件的状态</h1>
        <hr />
        <ul>
          <li>{this.state.count}</li>
          <li>{this.state.obj.name}</li>
          <li>{this.state.obj.age}</li>
          <li>{this.state.list.join(',')}</li>
          <li></li>
        </ul>
        <button onClick={this.changeState}>btn</button>
      </div>
    )
  }
}
export default TestState